<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>短信模板查看2</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link href="../../layui/css/iconfont/iconfont.css" rel="stylesheet" type="text/css">
    <link href="../../layui/css/layui.css" rel="stylesheet" type="text/css">
    <link href="../../css/style.css" rel="stylesheet" type="text/css">
    <script src="../../layui/layui.js"></script>
    <script src="../../js/jquery-1.8.3.js"></script>
    <script src="../../js/util.js"></script>
    <style>
        .phoneContent {
            width: 360px;
            height: 615px;
            margin: 0 40px;
            background: url("../../images/phoneBlack.png") no-repeat;
            background-size: 100% 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .showContent {
            background: url("../../images/phone.jpg") no-repeat;
            background-size: 100% 100%;
        }
        .phone {
            width: 330px;
            height: 455px;
            border-radius: 30px;
            display: flex;
            flex-direction: column;
            align-items: center;
            overflow-y: scroll;
            margin-top: 65px;
        }
        .layui-form-checked[lay-skin=primary] i {
            border-color: #597FC0 !important;
            background-color: #FFF !important;
            color: #597FC0 !important;
            font-weight: bold;
        }
        .phone .signatureContent {
            width: 85%;
            padding: 10px;
            color: #AEAEAE;
            background: #fff;
            border: 1px solid #dee3e8;
            margin-top: 20px;
            text-align: center;
            font-size: 12px;
            box-sizing: border-box;
        }
        .phone .topicalContent {
            width: 85%;
            padding: 10px;
            color: #AEAEAE;
            background: #fff;
            border: 1px solid #dee3e8;
            text-align: center;
            font-size: 12px;
            box-sizing: border-box;
        }
        .multimedia {
            width: 85%;
            height: 150px;
            color: #AEAEAE;
            background: #fff;
            border: 1px solid #dee3e8;
            margin-top: 20px;
            text-align: center;
            font-size: 12px;
            flex-grow: 0;
            flex-shrink: 0;
            line-height: 150px;
            overflow: hidden;
        }
        .addText {
            display: inline-block;
            width: 100%;
            word-break: break-all;
            line-height: 22px;
        }
        .check {
            background: #1E9FFF;
            color: #fff;
            padding: 6px;
            font-size: 12px;
            border-radius: 10px;
            margin-left: 5px;
            cursor: pointer;
        }
        .phoneBottom {
            color: #333;
            margin-top: 16px;
            font-size: 13px;
        }
        .outputPicture {
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .showPicture {
            margin: 0;
        }
    </style>
    <script>
        layui.use(['table','form', 'jquery', 'element', 'laydate', 'layer'], function () {
            var table = layui.table;
            var form = layui.form;
            var $ = layui.$;
            var laydate = layui.laydate;
            var layer = layui.layer;
            var mgrId = getUrlParam("mgrId");
            var cityId = "";
            var ip = window.location.host;
            var options = {
                elem: "#table",//表格id
                id: "modelReload", //id
                url: '/smsBaseStation/find',
                method: 'post',
                request: {
                    pageName: 'page',
                    limitName: 'limit'
                },
                response: {
                    statusName: 'code',
                    statusCode: 0,
                    msgName: 'msg',
                    countName: 'count',
                    dataName: 'data'
                },
                page: true,
                count: "count",
                limit: 10,
                limits: [10, 20, 30, 40, 50],
                layout: ['prev', 'page', 'next'],
                prev: "上一页",
                next: "下一页",
                cols: [[ //表头
                    {field: 'regionId', title: '区域编码'}
                    , {field: 'regionName', title: '区域名称'}
                    , {field: 'stationId', title: '基站编码'}
                    , {field: 'stationName', title: '基站名称'}
                ]]
            };
            table.render(options);
            laydate.render({
                elem: '#startTime'
            });
            laydate.render({
                elem: '#endTime'
            });
            laydate.render({
                elem: '#thresholdStartTime'
            });
            laydate.render({
                elem: '#thresholdEndTime'

            });
            laydate.render({
                elem: '#everyDayStartTime'
                , type: 'time'
                , btns: ['clear', 'confirm']
            });
            laydate.render({
                elem: '#everyDayEndTime'
                , type: 'time'
                , btns: ['clear', 'confirm']
            });
            //导出
            $('#download').on('click', function () {
                var url = "/template2/download?mgrId="+mgrId;
                location.href = url;


            });
            //页面数据初始化
            $(document).ready(function () {
                console.info(mgrId);
                var url = '/template2/findTemplate';
                var param = {
                    mgrId: mgrId,
                    sendType : '2'
                };
                $.ajax({
                    type: 'post',
                    async: false,
                    url: url,
                    data: param,
                    beforeSend: function () {
                        loading = layer.load(0, {shade: false});
                    },
                    success: function (json) {
                        layer.close(loading);
                        var data = json.data;
                        console.info(data);
                        cityId = data.cityId;
                        $("#messageNo").val(data.smsChannelNumber);
                        $("#everyDayStartTime").val(data.everyDayStartTime);
                        $("#everyDayEndTime").val(data.everyDayEndTime);
                        $("#cycleThreshold").val(data.cycleThreshold);
                        $("#threshold").val(data.threshold);
                        $("#startTime").val(data.startDate);
                        $("#endTime").val(data.endDate);
                        $("#mgrName").val(data.name);
                        $("#belong").val(data.belong);

                        if (!isNull(data.mgrType)) {
                            var mgrType = data.mgrType;
                            var typeName="";
                            url = "/util/findMgrTypeById";
                            param = {
                                mgrType: mgrType
                            };
                            $.ajax({
                                    type : 'post',
                                    async : false,
                                    url : url,
                                    data: param,
                                    success : function(json) {
                                        typeName = json.data;
                                        $("#mgrType").val(typeName);
                                    },
                                    error : function() {
                                        layer.msg('系统异常，请联系管理员处理!');
                                    }
                                }
                            );
                        }else{
                            $("#mgrType").val('暂未配置项目类型');
                        }
                        if (!isNull(data.content)) {
                            $("#content").val(data.content);
                            var isThreshold = data.isThreshold;
                            var threshold = data.threshold;
                            var cycleThreshold = data.cycleThreshold;
                            var cycle = data.cycle;

                            url = "/util/contentCount";
                            param = {
                                content : data.content
                            };

                            $.ajax({
                                type : 'post',
                                data : param,
                                url : url,
                                beforeSend : function() {
                                    loading = layer.load(0, {
                                        shade : false
                                    });
                                },
                                success : function(json) {
                                    layer.close(loading);
                                    if (json.code == 0) {
                                        $("#contentLength").html(data.content.length);
                                        $("#contentNum").html(json.data);

                                        if (isThreshold == 1) {
                                            $("#thresholdNum").html(" , 总计将发送：" + (json.data) * threshold + "  条");
                                        } else if (isThreshold == 2 && cycle == 1) {
                                            $("#thresholdNum").html(" , 每年将发送：" + (json.data) * cycleThreshold + "  条");
                                        } else if (isThreshold == 2 && cycle == 2) {
                                            $("#thresholdNum").html(" , 每月将发送：" + (json.data) * cycleThreshold + "  条");
                                        } else if (isThreshold == 2 && cycle == 3) {
                                            $("#thresholdNum").html(" , 每周将发送：" + (json.data) * cycleThreshold + "  条");
                                        } else if (isThreshold == 2 && cycle == 4) {
                                            $("#thresholdNum").html(" , 每天将发送：" + (json.data) * cycleThreshold + "  条");
                                        } else if (isThreshold == 3 && cycle == 1) {
                                            $("#thresholdNum").html(" , 总计将发送：" + (json.data) * threshold + "  条 , 每年将发送：" + (json.data) * cycleThreshold + "  条");
                                        } else if (isThreshold == 3 && cycle == 2) {
                                            $("#thresholdNum").html(" , 总计将发送：" + (json.data) * threshold + "  条 , 每月将发送：" + (json.data) * cycleThreshold + "  条");
                                        } else if (isThreshold == 3 && cycle == 3) {
                                            $("#thresholdNum").html(" , 总计将发送：" + (json.data) * threshold + "  条 , 每周将发送：" + (json.data) * cycleThreshold + "  条");
                                        } else if (isThreshold == 3 && cycle == 4) {
                                            $("#thresholdNum").html(" , 总计将发送：" + (json.data) * threshold + "  条 , 每天将发送：" + (json.data) * cycleThreshold + "  条");
                                        }
                                    }
                                }
                            });

                        }
                        if (data.realTime == 0) {
                            $("#realTime").val("立即发送");
                        }
                        else{
                            $("#realTime").val("延时"+data.realTime+"分钟");
                        }


                        if(data.nonLocalIsCz == 0){
                            $("#nonLocalIsCz1").val("非常驻");
                        }else if(data.nonLocalIsCz == 1){
                            $("#nonLocalIsCz1").val("常驻+非常驻");
                        }else{
                            $("#nonLocalIsCz1").val("常驻");
                        }

                        if (data.isLocal == 0) {
                            $("#isLocal").val("本地发送");
                            $("#localDate").val(data.localDate+"天");
                            $("#nonlocalTime").hide();
                            $("#province").hide();
                            /*                             $("#localIsCz").show(); */
                            $("#nonLocalIsCz").hide();
                        } else if (data.isLocal == 1) {
                            $("#isLocal").val("外地发送");
                            $("#localTime").hide();
                            $("#nonlocalTime").show();
                            $("#localIsCz").hide();
                            $("#nonLocalIsCz").show();

                            if(data.isProvince == 0){$("#isProvince").val("省内发送");}
                            else{$("#isProvince").val("省内+省外");}
                            $("#nonlocalDate").val(data.nonlocalDate+"天");
                        }else if(data.isLocal==2){
                            $("#isLocal").val("本地+外地");
                            $("#localDate").val(data.localDate+"天");
                            $("#nonlocalDate").val(data.nonlocalDate+"天");
                            /*                             $("#localIsCz").show(); */
                            $("#nonLocalIsCz").show();
                            if(data.isProvince == 0){$("#isProvince").val("省内发送");}
                            else{$("#isProvince").val("省内+省外");}
                        }
                        var cycleMsg;
                        if (data.isThreshold == 0) {
                            cycleMsg = "没有设置阀值";
                        } else if (data.isThreshold == 1) {
                            cycleMsg = "发送总量为" + data.threshold + "条";
                        } else if (data.isThreshold == 2) {
                            if (data.cycle == 1) {
                                cycleMsg = "发送量为每年" + data.cycleThreshold + "条";
                            }
                            if (data.cycle == 2) {
                                cycleMsg = "发送量为每月" + data.cycleThreshold + "条";
                            }
                            if (data.cycle == 3) {
                                cycleMsg = "发送量为每周" + data.cycleThreshold + "条";
                            }
                            if (data.cycle == 4) {
                                cycleMsg = "发送量为每日" + data.cycleThreshold + "条";
                            }
                            if (data.cycle == 5) {
                                cycleMsg = "发送量为" + data.cycleThreshold + "条,时间范围:" +
                                    data.thresholdStartTime + "至" + data.thresholdEndTime;
                            }
                        } else if (data.isThreshold ==3) {
                            if (data.cycle == 1) {
                                cycleMsg ="发送总量为" + data.threshold + "条,周期发送量为每年" + data.cycleThreshold + "条";
                            }
                            if (data.cycle == 2) {
                                cycleMsg = "发送总量为" + data.threshold + "条,周期发送量为每月" + data.cycleThreshold + "条";
                            }
                            if (data.cycle == 3) {
                                cycleMsg = "发送总量为" + data.threshold + "条,周期发送量为每周" + data.cycleThreshold + "条";
                            }
                            if (data.cycle == 4) {
                                cycleMsg = "发送总量为" + data.threshold + "条,周期发送量为每日" + data.cycleThreshold + "条";
                            }
                            if (data.cycle == 5) {
                                cycleMsg = "发送总量为" + data.threshold + "条,周期发送量为" + data.cycleThreshold + "条,时间范围:" +
                                    data.thresholdStartTime + "至" + data.thresholdEndTime;
                            }
                        }
                        $("#threshold").text(cycleMsg);
                        var index = layer.load(1, {
                            shade: [0.1,'#fff'] //0.1透明度的白色背景
                        });
                        table.reload('modelReload', {
                            method: 'post',
                            page: {
                                curr: 1
                            },
                            where: {
                                mgrId: mgrId,
                                cityId: data.cityId
                            }
                        });
                        layer.close(index);
                    }
                    ,
                    error: function (data) {
                        layer.msg('系统异常，请联系管理员处理!');
                    }
                });
                $.ajax({
                    type: 'post',
                    async: false,
                    data: {"mgrId": mgrId},
                    url: '/template/qry5GTemplateInfo',
                    //contentType:"application/json;charset=UTF-8",
                    success: function (obj) {
                        if(obj.retCode==0){
                            if(!obj.data) {
                                return
                            }
                            let items = obj.data.uploadFileInfoList;
                            console.log(items);
                            $(".phone").eq(0).append("<div class='topicalContent'>"+ obj.data.topic +"</div>");
                            $(".phone").eq(0).append("<div class='signatureContent'>"+ obj.data.signName +"</div>");
                            for(let i=0;i<items.length;i++) {
                                if(items[i].type == 1) {
                                    $(".phone").eq(0).append("<div class='multimedia'><span class='addText'>"+ items[i].content  +"</span></div>");
                                }else if(items[i].type == 2) {
                                    $(".phone").eq(0).append("<div class='multimedia'><img src="+"'http://"+ip+"/servlet/h5imageShowServlet?type=2&fileName="+items[i].fileName +"'" +"style='max-height: 100%;width: 100%;' controls></div>");
                                }else if(items[i].type == 3) {
                                    $(".phone").eq(0).append("<div class='multimedia'><video src="+"'http://"+ip+"/servlet/h5imageShowServlet?type=2&fileName="+items[i].fileName+"'" +"style='width: 100%;' controls></div>");
                                }else if(items[i].type == 4) {
                                    $(".phone").eq(0).append("<div class='multimedia'><audio src="+"'http://"+ip+"/servlet/h5imageShowServlet?type=2&fileName="+items[i].fileName+"'" +"style='width: 100%;' controls></div>");
                                }
                            }
                        }else{
                            layer.msg(obj.msg);
                        }
                    },
                    error: function(){
                        layer.close(index);
                        layer.msg('系统异常，请联系管理员处理!');
                    }
                });
                $("#checkRange").click(function() {
                    //sessionStorage.setItem('setMgrId', mgrId);

                    var url ='editSendRange.html?mgrId='+mgrId+'&cityId='+cityId;
                    layer.open({
                        title: '基站范围',
                        type: 2,
                        content: url,
                        area: ['1000px', '550px'],
                        scrollbar: true
                    });
                    // layer.open({
                    //     type: 2,
                    //     title: '基站范围',
                    //     offset: '65px',
                    //     shade: 0.8,
                    //     area: ['100%', '90%'],
                    //     shadeClose: false,
                    //     content: 'editSendRange.html?mgrId='+mgrId+'&cityId='+cityId //iframe的url
                    // });
                });
            });
        });
    </script>
</head>
<body>
<!--nav-->
<div class="layui-html-limit">
    <!--container-->
    <div class="layui-content-body">
        <div class="scroll-box">
            <div class="breadcrumb-box">
              <span class="layui-breadcrumb" lay-separator="|">
    <a href="javascript:returnIndex2()">首页&nbsp;</a>
  <a href=""> &nbsp;短信模板管理&nbsp; </a>
  <a href="smsTemplateManage2.html"> &nbsp;短信项目模板配置管理</a>
  <a href=""> &nbsp;短信项目模板查看&nbsp; </a>
</span>
            </div>
            <div class="content-box">
                <div class="layui-form layui-form-pane">
                    <div class="layui-form-item">
                        <label class="layui-btn layui-btn-lg layui-btn-normal" style="cursor:auto;">项目基本信息</label>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-block" pane="">
                            <label class="layui-form-label">短信通道号</label>
                            <div class="layui-input-block">
                                <input type="text"   style="width:auto"
                                       id="messageNo" autocomplete="off" class="layui-input" disabled>
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-block" pane="">
                            <label class="layui-form-label">归属地</label>
                            <div class="layui-input-block">
                                <input type="text"   style="width:auto"
                                       id="belong" autocomplete="off" class="layui-input" disabled>
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-block" pane="">
                            <label class="layui-form-label">项目名称</label>
                            <div class="layui-input-block">
                                <input type="text"   style="width:auto"
                                       id="mgrName" autocomplete="off" class="layui-input" disabled>
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-block" pane="">
                            <label class="layui-form-label">项目类型</label>
                            <div class="layui-input-block">
                                <input type="text"   style="width:auto"
                                       id="mgrType" autocomplete="off" class="layui-input" disabled>
                            </div>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <div class="layui-block">
                            <label class="layui-form-label" style="width: auto">发送起止时间</label>
                            <div class="layui-input-inline">
                                <input type="text" name="date" id="startTime" autocomplete="off" class="layui-input"
                                       disabled  >
                            </div>
                            <div class="layui-form-mid">-</div>
                            <div class="layui-input-inline">
                                <input type="text" name="date" id="endTime" autocomplete="off" class="layui-input" disabled>
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-block">
                            <label class="layui-form-label" style="width:auto">每日发送时间段</label>
                            <div class="layui-input-inline">
                                <div class="layui-input-inline">
                                    <input type="text" name="date" id="everyDayStartTime" autocomplete="off"
                                           class="layui-input"
                                           disabled>
                                </div>
                            </div>
                            <div class="layui-form-mid">-</div>
                            <div class="layui-input-inline">
                                <div class="layui-input-inline">
                                    <input type="text" name="date" id="everyDayEndTime" autocomplete="off"
                                           class="layui-input"
                                           disabled>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-block" pane="">
                            <label class="layui-form-label">发送实时性</label>
                            <div class="layui-input-block">
                                <input type="text"   style="width:auto"
                                       id="realTime" autocomplete="off" class="layui-input" disabled>
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-block" pane="">
                            <label class="layui-form-label" style="width: auto">号码发送范围</label>
                            <div class="layui-input-block">
                                <input type="text" id="isLocal"
                                       autocomplete="off" class="layui-input" disabled  style="width:auto">
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item" id="localIsCz" style="display: none">
                        <div class="layui-block" pane="">
                            <label class="layui-form-label" style="width: auto">本地发送是否屏蔽常驻人口</label>
                            <div class="layui-input-block">
                                <input type="text" id="localIsCz1"
                                       autocomplete="off" class="layui-input" disabled  style="width:auto">
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item" id="nonLocalIsCz">
                        <div class="layui-block" pane="">
                            <label class="layui-form-label" style="width: auto">常驻人口发送范围</label>
                            <div class="layui-input-block">
                                <input type="text" id="nonLocalIsCz1"
                                       autocomplete="off" class="layui-input" disabled  style="width:auto">
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item" id="localTime">
                        <div class="layui-block" pane="">
                            <label class="layui-form-label" style="width: auto">本地发送保存时间</label>
                            <div class="layui-input-block">
                                <input type="text" id="localDate"
                                       autocomplete="off" class="layui-input" disabled style="width:auto">
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item" id="nonlocalTime">
                        <div class="layui-block" pane="">
                            <label class="layui-form-label" style="width: auto">外地发送保存时间</label>
                            <div class="layui-input-block">
                                <input type="text" id="nonlocalDate"
                                       autocomplete="off" class="layui-input" disabled style="width:auto">
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item" id="province">
                        <div class="layui-block" pane="">
                            <label class="layui-form-label" style="width: auto">外地发送范围</label>
                            <div class="layui-input-block">
                                <input type="text" id="isProvince" autocomplete="off"
                                       class="layui-input" disabled style="width:auto">
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-block" pane="">
                            <label class="layui-form-label" style="width: auto">短信发送量阀值</label>
                            <div class="layui-input-block">
                                <div id="threshold" class="text-autoWidth"></div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-btn layui-btn-lg layui-btn-normal" style="cursor:auto;">项目发送内容</label>
                    </div>
                    <div class="layui-form-item">
                        <div class="phoneContent showContent">
                            <div class="phone"></div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-btn layui-btn-lg layui-btn-normal" style="cursor:auto;">项目基站信息</label>
                    </div>
                    <div style="float:right;">
                        <button class="layui-btn layui-btn-normal" type="button" id="checkRange">
                            基站范围
                        </button>
                        <button class="layui-btn layui-btn-normal" type="button" id="download">
                            导出
                        </button>
                    </div>

                    <div class="layui-table" style="float:right;">
                        <table id="table" lay-filter="tableElement"></table>
                    </div>
                    <div class="layui-form-item">
                        <a href="smsTemplateManage2.html"><button class="layui-btn">返回</button></a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

</body>
</html>